<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
        <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
            <!DOCTYPE html>
            <html lang="zh_CN">

            <head>
                <%@ include file="templates/header-css.jsp"%>

                    <title>index</title>
            </head>

            <body class="gray-bg">


                <!--Header-->
                <%@ include file="templates/navbar.jsp" %>


                    <div class="mid-nav shadow-div">
                        <div class="row">
                            <div class="col-md-3 inner-center">
                                <img src="${myPicServer}${merchantInfo.mLogoPath }" class="m-logo img-circle">
                            </div>
                            <div class="col-md-9 content-title">
                                <h3>${merchantInfo.mBrand }</h3>
                                <h5>
					<i class="fa fa-phone" aria-hidden="true">&nbsp;&nbsp;</i>${merchantInfo.mTel }
				</h5>
                                <h5>商家地址：${merchantInfo.mLocation }</h5>
                            </div>
                        </div>
                    </div>


                    <div class="mid-nav shadow-div">
                        <div class="row">
                            <input type="text" value="${merchantInfo.mId }" style="display: none;" id="midinput" />
                            <c:forEach var="food" items="${foods }">
                                <div class="col-md-3">
                                    <div class="thumbnail small-card">
                                        <img src="${myPicServer}${food.fViewPath }" class="menu-img">
                                        <div class="caption">
                                            <h3>${food.fName }</h3>
                                            <div class="row card-margin">
                                                <div class="col-md-8">
<!--                                                    <b class="price-font glyphicon glyphicon-yen"></b> <b class="price-font">${food.fPrice }</b>-->
                                                    <b class="price-font">${food.fPrice }元</b>
                                                </div>
                                                <div class="col-md-4">
                                                    <button type="button" class="btn add-btn hvr-wobble-to-bottom-right addcart" onclick="addToCart('${food.fId }','${food.fName }','${food.fPrice }')">
                                                        <i class="glyphicon glyphicon-shopping-cart" style="color: #ffffff;"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </c:forEach>

                        </div>
                    </div>


                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content" style="margin-top: 150px">
                                <div class="modal-header gold-bg">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                </div>
                                <div class="modal-body">
                                    <table class="table table-striped" style="table-layout: fixed; text-align: center;">
                                        <thead>
                                            <tr>
                                                <th style="text-align: center;">菜名</th>
                                                <th style="text-align: center;">数量</th>
                                                <th style="text-align: center;">价格(元)</th>
                                            </tr>
                                        </thead>
                                        <tbody id="cart-orderbody">
                                            <tr>
                                                <td>Dish 003dddddddddddd</td>
                                                <td>1</td>
                                                <td>12</td>
                                            </tr>
                                            <tr>
                                                <td>Dish 003dddddddddddd</td>
                                                <td>1</td>
                                                <td>12</td>
                                            </tr>
                                            <tr>
                                                <td>Dish 003dddddddddddd</td>
                                                <td>1</td>
                                                <td>12</td>
                                            </tr>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td>总计:</td>
                                                <td></td>
                                                <td>
                                                    <h3 id="order-total">0</h3></td>
                                            </tr>
                                             <tr>
                                             <td colspan="3" id="userLocation"></td>
                                             </tr>
                                        </tfoot>
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-common hvr-wobble-vertical" data-dismiss="modal" onclick="commitOrder()">Commit order</button>
                                </div>
                            </div>
                        </div>
                    </div>



                    <div class="right-box" id="end">
                        <a href="#infoMenu" class="collapsed" data-toggle="collapse" id="cart-link"><h3>Your
				Cart</h3></a>
                        <div id="infoMenu" class="nav nav-pills nav-stacked collapse">
                            <table style="width: 300px; table-layout: fixed;" class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>菜名</th>
                                        <th>数量</th>
                                        <th>价格(元)</th>
                                    </tr>
                                </thead>

                                <tbody id="cartBody">

                                </tbody>

                                <tfoot>
                                    <tr>
                                        <td colspan="2">总计:</td>
                                        <td>
                                            <h4 id="total">0</h4></td>
                                    </tr>
                                </tfoot>
                            </table>
                            <div class="checkout-box">
                                <a href="#">
                                    <button type="button" class="btn btn-black hvr-wobble-vertical" data-toggle="modal" data-target="#myModal" onclick="showFoodOrder()">
                                        <span style="color: gold;">Check Out</span>
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>

                    <a href="#top">
                        <div class="right-top-box">
                            <span class="glyphicon glyphicon-chevron-up back-icon"></span>
                        </div>
                    </a>

                   <!-- 登录模态框 -->
                <div class="modal fade" id="SignInModal" tabindex="-1" role="dialog" aria-labelledby="title">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header gold-bg">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="title">登录</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="panel panel-default">
                                                <div class="panel-body">
                                                    <form action="." method="post">
                                                        <div class="form-group">
                                                            <label for="usr">Telephone</label>
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span> </span>
                                                                <input type="text" class="form-control" name="username" placeholder="Telephone" autofocus>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="pwd">Password</label>
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span> </span>
                                                                <input type="password" class="form-control" name="password" placeholder="password">
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                <div class="modal-footer">
                                    <button class="btn btn-common btn-block" type="button">登录</button>
                                    <button class="btn btn-cancel btn-block" type="button" data-dismiss="modal">取消</button>
                                </div>
                        </div>
                    </div>
                </div>
                   
                   
                    <footer>
                        <%@ include file="templates/footer.jsp"%>
                            <script type="text/javascript">
                                $(function () {
                                	//默认购物车为打开状态
                                	$("#cart-link").click();
                                    //登录
                                    $("#SignInModal").find(".modal-footer button:first").click(function () {
                                        $.post(
                                            '${pageContext.request.contextPath}/login', {
                                                username: $('[name=username]').val(),
                                                password: $('[name=password]').val()
                                            },
                                            function (data) {
                                                if (data.st === 1) {
                                                    alert(data.msg);
                                                    window.location = '${pageContext.request.contextPath}';
                                                } else if (data.st === -1) {
                                                    alert(data.msg);
                                                    //window.href = 'clientHome.html';
                                                } else {
                                                    alert(data.msg);
                                                    alert('unknown');
                                                }
                                            }
                                        );
                                    });

                                    var getmid = $("#midinput").get(0).value;
                                    $.ajax({
                                        url: "action/showUserCart",
                                        type: "get",
                                        data: {
                                            mId: getmid
                                        },
                                        success: function (result) {
                                            loadCart(result);
                                            showFoodCart();
                                        }
                                    })
                                });
                            </script>
                    </footer>
            </body>




            </html>